<template>
  <div id="bigbox">
    <div id="big">
      <br />
      <div><span id="shuxian">| </span> <span> 数据概况</span></div>
      <div class="sign-search">
        <div class="status-1">
          <span class="sign-sp">选择日期范围</span>
          <el-date-picker
            v-model="payTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <br />
        <div class="status">
          <span class="sign-sp">机构</span>
          <el-select v-model="list.appointInstitution" placeholder="请选择">
            <el-option :label="appointInstitution" :value="1"
              >罗西社区服务中心</el-option
            >
            <el-option :label="appointInstitution" :value="2"
              >天明社区服务中心</el-option
            >
            <el-option :label="appointInstitution" :value="3"
              >民进社区服务中心</el-option
            >
          </el-select>
        </div>
        <div class="status">
          <span class="sign-sp">医生团队</span>
          <el-select v-model="list.appointDoctor" placeholder="请选择">
            <el-option :label="appointDoctor" :value="1">王浩团队</el-option>
            <el-option :label="appointDoctor" :value="2">胡曼团队</el-option>
            <el-option :label="appointDoctor" :value="3">李维团队</el-option>
          </el-select>
        </div>
        <div class="status">
          <span class="sign-sp">医生</span>
          <el-select v-model="list.appointStatus" placeholder="请选择">
            <el-option :label="status" :value="1">李明</el-option>
            <el-option :label="status" :value="2">王浩</el-option>
            <el-option :label="status" :value="3">江晓敏</el-option>
          </el-select>
        </div>
      </div>

      <div class="echarts">
        <div class="echart" id="mychart" :style="myChartStyle"></div>
      </div>
      <!-- <el-table
        style="width: 100%;  padding-left: 0px; margin-top: 30px"
        :header-cell-style="{ background: 'silver', color: '#606266' }"
        :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
        <el-table-column width="35">
        </el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="编号" width="300" prop="appointId"></el-table-column>
        <el-table-column label="编号" width="300" prop="appointId"></el-table-column>
        <el-table-column label="编号" width="300" prop="appointId"></el-table-column>
        <el-table-column label="签约人姓名" width="200" prop="appointName">
          <template slot-scope="list">
              <p v-html="list.row.appointName"></p>
          </template>
        </el-table-column>      
        <el-table-column
          >
        <el-button
              @click.native.prevent="selectRow(scope.$index, tableData)"
              type="text"
              size="small">
              查看详情
            </el-button>
            <template slot-scope="scope">
            <el-button @click="deleteRow(scope.row.appointId)" type="danger"
                   icon="el-icon-delete" size="small"
                   circle></el-button>
            </template>
        </el-table-column>
      </el-table> -->
      <div id="data1">
        <el-table style="width: 100%" :data="getValues" :show-header="false">
          <el-table-column
            stripe
            v-for="(item, index) in getHeaders"
            :key="index"
            :prop="item"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      xData: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"], //横坐标
      yData: [25, 30, 12, 40, 36, 24, 31], //人数数据
      taskDate: [10, 11, 9, 17, 14, 13, 14],
      taskDate2: [15, 19, 3, 23, 22, 11, 17],
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      currentPage: 1, //初始页
      pagesize: 3, //每页条数
      list: [],
      status: 0,
      serve: 0,
      minDate: "",
      maxDate: "",
      appointName: "",
      payTime: [],
      headers: [
        {
          prop: "dataType",
          label: "数据类型",
        },

        {
          prop: "addResident",
          label: "新增居民数量",
        },

        {
          prop: "addContract",
          label: "新增签约数",
        },

        {
          prop: "addServe",
          label: "新增服务量",
        },

        {
          prop: "total",
          label: "合计",
        },
      ],

      tableData: [
        {
          dataType: "2021-01-04",
          addResident: 50,
          addContract: 77,
          addServe: 34,
          total: 100,
        },

        {
          dataType: "2021-01-05",
          addResident: 520,
          addContract: 77,
          addServe: 34,
          total: 100,
        },

        {
          dataType: "2016-05-01",
          addResident: 501,
          addContract: 77,
          addServe: 34,
          total: 100,
        },

        {
          dataType: "2016-05-03",
          addResident: 150,
          addContract: 77,
          addServe: 34,
          total: 100,
        },
      ],
    };
  },
  mounted() {
    this.initEcharts();
  },
  computed: {
    getHeaders() {
      return this.tableData.reduce(
        (pre, cur, index) => pre.concat(`value${index}`),
        ["title"]
      );
    },

    getValues() {
      return this.headers.map((item) => {
        return this.tableData.reduce(
          (pre, cur, index) =>
            Object.assign(pre, { ["value" + index]: cur[item.prop] }),

          { title: item.label }
        );
      });
    },
  },
  methods: {
    initEcharts() {
      // 多列柱状图

      const mulColumnZZTData = {
        xAxis: {
          data: this.xData,
        }, // 图例

        legend: {
          data: ["全部", "首次签约", "续约"],

          top: "0%",
        },

        yAxis: {},

        series: [
          {
            type: "bar", //形状为柱状图
            color: "#2984f8",
            data: this.yData,

            name: "全部", // legend属性

            label: {
              // 柱状图上方文本标签，默认展示数值信息

              show: true,

              position: "top",
            },
          },

          {
            type: "bar", //形状为柱状图
            color: "#3dd49e",
            data: this.taskDate,

            name: "首次签约", // legend属性

            label: {
              // 柱状图上方文本标签，默认展示数值信息

              show: true,

              position: "top",
            },
          },
          {
            type: "bar", //形状为柱状图
            color: "#fa746b",
            data: this.taskDate2,

            name: "续约", // legend属性

            label: {
              // 柱状图上方文本标签，默认展示数值信息

              show: true,

              position: "top",
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData); //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style>
.echarts {
  width: 75%;
  height: 414px;
  /* float: left; */
  margin: 80px auto;
}
.sign-search {
  margin-left: 20px;
  width: 97%;
  height: 50px;
}
.status {
  float: left;
  margin-left: 30px;
}
#bigbox {
  width: 100%;
  height: 1014px;
  background-color: #f2f7fb;
  /* background-color: yellow; */
}
#big {
  margin: 10px auto;
  width: 90%;
  height: 614px;
  background-color: #ffffff;
  /* background-color: red; */
}
#shuxian {
  color: blue;
  font-size: 16px;
  font-weight: 550;
  padding-left: 15px;
}
.sign-sp {
  margin-left: 23px;
  margin-right: 10px;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #999999;
}
</style>